<template>
  <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #ccc;display: flex">
    <div style="width:200px;padding-left: 500px;font-weight: bold;color: #2155c2">
      查看问卷结果
    </div>
  </div>
  <div style="padding-left: 15px;padding-top: 10px">
    <el-button type="primary" text @click="getAllResult">批量查看</el-button>
    <el-dialog
        v-model="dialogVisible1"
        title="问卷结果"
        width="80%"
        :before-close="handleClose"
    ><div style="margin: 30px" id="data-table">

      <el-table :data="tableDataCount2" style="width: 100%">
        <el-table-column prop="questionnaireId" label="问卷序号" width="80"/>
        <el-table-column prop="questionId" label="题目序号" width="180"/>
        <el-table-column prop="countA" label="选项A数量" width="180"/>
        <el-table-column prop="countB" label="选项B数量" width="180"/>
        <el-table-column prop="countC" label="选项C数量" width="180"/>
        <el-table-column prop="countD" label="选项D数量" width="180"/>
      </el-table>


    </div>

    </el-dialog>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="序号" width="200"/>
    <el-table-column prop="name" label="问卷名" width="500"/>
    <el-table-column prop="state" label="状态" width="160"/>
    <el-table-column fixed="right" label="操作" width="300">
      <template #default="scope"> <!--#default="scope"-->
        <el-button type="text" size="small" @click=getResult(scope.row)>查看结果</el-button>
        <el-dialog
            v-model="dialogVisible2"
            title="问卷结果"
            width="80%"
            :before-close="handleClose"
        ><div style="margin: 30px" id="data-table">

          <el-table :data="tableDataCount" style="width: 100%">
            <el-table-column prop="questionnaireId" label="问卷序号" width="80"/>
            <el-table-column prop="questionId" label="题目序号" width="180"/>
            <el-table-column prop="countA" label="选项A数量" width="180"/>
            <el-table-column prop="countB" label="选项B数量" width="180"/>
            <el-table-column prop="countC" label="选项C数量" width="180"/>
            <el-table-column prop="countD" label="选项D数量" width="180"/>
          </el-table>


        </div>

        </el-dialog>

      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import request from "@/request/request";
import * as echarts from "echarts/core"
import { TitleComponent, GridComponent } from "echarts/components"
import { BarChart } from "echarts/charts"
import { CanvasRenderer } from "echarts/renderers"
echarts.use([TitleComponent, GridComponent, BarChart, CanvasRenderer])

export default {
  name: "index.vue",

  data() {

    return {
      tableDataCount2:[],
      tableDataCount:[],
      tableData: [],
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      form: {
        id:'',
        name:'',
        state:'',
        username:''
      },
      form2:{
        id:0,
        questionnaireId:'',
        questionId:'',
        countA:0,
        countB:0,
        countC:0,
        countD:0
      },
      username:''

    }

  },
  created() {
    this.load()
  },

  methods: {

    load() {
      let token = localStorage.getItem('token')
      this.$http.post("/user/getUserNameByToken", token).then(res => {
        if (res.statusCode == '200') {
          this.username = res.data
          this.form.username = this.username
          request.post("questionnaire/showQuestionnaireOpen", this.form).then(res => {
            this.tableData = res.data
          })
        }
      })

    },
    update() {
      this.$router.go(0)
    },


    handleClose() {
      this.address = ''
      this.dialogVisible1 = false
      this.dialogVisible2 = false
      this.dialogVisible3 = false

    },
    cancel() {
      this.handleClose()
    },

    getResult(row){
      this.dialogVisible2 = true
      console.log(row)
      this.form2.questionnaireId = row.id

      request.post("questionnaireResultCount/showQuestionnaireCount",this.form2).then(res =>{
        this.tableDataCount = res.data;
      })

    },
    getAllResult(){
      this.dialogVisible1 = true
      let token = localStorage.getItem('token')
      this.$http.post("/user/getUserNameByToken",token).then(res=>{
        if(res.statusCode == '200'){
          this.username = res.data
          this.form.username = this.username
          request.post("questionnaireResultCount/showAllCount",this.form).then(res => {
            this.tableDataCount2 = res.data
          })
        }
      })
    }


  }
}
</script>

<style scoped>

</style>